<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="demo">
    姓：<input type="text" placeholder="First Name"><br>
    名：<input type="text" placeholder="Last Name"><br>
    姓名1(单向)：<input type="text" placeholder="Full Name1"><br>
    姓名2(单向)：<input type="text" placeholder="Full Name2"><br>
    姓名3(双向)：<input type="text" placeholder="Full Name3"><br>
  </div>
  <script type="text/javascript" src="/js/vue.js"></script>
  <script type="text/javascript">
    const p = {
      firstName : 'T',
      lastName : 'L'
    }
    /* 
    给p对象添加一个fullName属性:
    1). 值根据firstName/lastName来组成: firstName-lastName
    2). 如果改变firstName/lastName, 读取fullName应该是最新值
    3). 如果改变fullName, 读取到的firstName/lastName也是最新值
    */
/*     p.fullName = p.firstName + '-' + p.lastName// 编码简洁, 功能有限
    console.log(p.fullName)//T-L

    p.firstName = 'a'
    p.lastName = 'b'
    console.log(p.fullName)//T-L */
    // Object.defineProperty(obj, prop, descriptor)
    Object.defineProperty(p,'fullName',{
      get(){
      return this.firstName +'-'+this.lastName
      },
      set(value){
        const names = value.split('-')
        this.firstName = names[0]
        this.lastName = names[1]
      }

    })
    // p.firstName = 'a'
    // p.lastName = 'b'
    console.log(p.fullName,p.firstName,p.lastName)
  </script>
</body>
</html>